<script setup>
import { toast } from '@/utils/elnotification';
import { ref } from 'vue'

const activeName = ref('first')

const form1 = ref({
    name1: 1,
    name2: 1,
    name3: '7',
    name4: true,
    name5: true,
    name6: true,
})

const form2 = ref({
    name1: 1,
    name2: null,
    name3: '**************',
    name4: '**************',
    name5: null,
})

const form3 = ref({
    name1: 1,
    name2: '122232133239',
})

const onSubmit = () => {
    toast('演示环境', 'error')
}

</script>

<template>
    <el-card shadow="never" class="border-0">
        <el-tabs v-model="activeName">
            <el-tab-pane label="注册与访问" name="first">
                <el-form :model="form1" label-width="180px">
                    <el-form-item label="是否允许注册会员" style="width: 400px;">
                        <el-radio-group v-model="form1.name1">
                            <el-radio :label="1" border>是 </el-radio>
                            <el-radio :label="2" border>否 </el-radio>
                        </el-radio-group>
                    </el-form-item>

                    <el-form-item label="注册类型" style="width: 700px;">
                        <el-radio-group v-model="form1.name2">
                            <el-radio :label="1" border>普通注册 </el-radio>
                            <el-radio :label="2" border>手机注册</el-radio>
                        </el-radio-group>
                    </el-form-item>

                    <el-form-item label="密码最小长度" style="width: 500px;">
                        <el-input v-model="form1.name3" />
                    </el-form-item>

                    <el-form-item label="强制密码复杂度" style="width: 700px;">
                        <el-checkbox v-model="form1.name4" label="数字" border />
                        <el-checkbox v-model="form1.name5" label="小写字母" border />
                        <el-checkbox v-model="form1.name6" label="大写字母" border />
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">保存</el-button>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="上传设置" name="second">
                <el-form :model="form2" label-width="180px">
                    <el-form-item label="默认上传方式" style="width: 400px;">
                        <el-radio-group v-model="form2.name1">
                            <el-radio :label="1" border>阿里云OS </el-radio>
                        </el-radio-group>
                    </el-form-item>

                    <el-form-item label="Bucket" style="width: 700px;">
                        <el-input v-model="form2.name2" placeholder="Bucket" />
                    </el-form-item>

                    <el-form-item label="ACCESS_KEY" style="width: 700px;">
                        <el-input v-model="form2.name3" placeholder="ACCESS_KEY" />
                    </el-form-item>

                    <el-form-item label="SECRET_KEY" style="width: 700px;">
                        <el-input v-model="form2.name4" placeholder="SECRET_KEY" />
                    </el-form-item> <el-form-item label="空间域名" style="width: 700px;">
                        <el-input v-model="form2.name5" placeholder="http" /><span class="text-gray-400 text-sm"> 请补全http://
                            或
                            https://</span>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">保存</el-button>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="Api安全" name="third">
                <el-form :model="form3" label-width="180px">
                    <el-form-item label="是否开启API安全" style="width: 700px;">
                        <el-radio-group v-model="form3.name1">
                            <el-radio :label="1" border>是 </el-radio>
                            <el-radio :label="2" border>否 </el-radio>
                            <span class="text-gray-400 text-sm"> api安全功能开启之后调用前端api需要传输签名串</span>
                        </el-radio-group>
                    </el-form-item>

                    <el-form-item label="密钥" style="width: 800px;">
                        <el-input v-model="form3.name2" placeholder="请输入密钥" />
                        <span class="text-gray-400 text-sm">
                            秘钥设置关系系统中api调用传输签名串的编码规则，以及会员token解析，请慎重设置，注意设置之后对应会员要求重新登录获取token</span>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">保存</el-button>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
        </el-tabs>
    </el-card>
</template>

<style scoped></style>
